<template>
	<view class="auth-container">
		<!-- 共享背景元素 -->
		<view class="particle-bg">
			<view v-for="(dot, index) in particles" class="particle" :style="particleStyle(dot)">
			</view>
		</view>

		<!-- 动态插画 -->
		<view class="header-illustration">
			<image src="https://example.com/register-illustration.webp" mode="aspectFit"></image>
		</view>

		<!-- 注册表单 -->
		<view class="form-box">
			<view class="form-title">
				<text>创建我们的甜蜜账户</text>
			</view>

			<u-form :model="form" ref="uForm" :rules="rules">
				<!-- 情侣关系绑定 -->
				<view v-if="!isEditingCoupleId" class="couple-card" @click="scanCoupleCode">
					<image src="https://example.com/couple-badge.webp" class="couple-badge"></image>
					<text class="tip-text">{{ '点击绑定你的另一半' }}</text>
				</view>

				<u-form-item prop="coupleId" label="👫 情侣ID" label-width="120" v-else>
					<u-input v-model="form.coupleId" placeholder="输入情侣ID" />
				</u-form-item>

				<!-- 表单内容 -->
				<u-form-item prop="telephone" label="💌 手机号" label-width="120">
					<u-input v-model="form.telephone" placeholder="输入联络号码" />
				</u-form-item>

				<!-- <u-form-item prop="code" label="🔑 验证码" label-width="120">
					<u-input v-model="form.code" placeholder="输入验证码" />
					<u-button size="mini" :custom-style="codeBtnStyle" @click="getSMSCode"
						:disabled="codeCountdown > 0">
						{{ codeBtnText }}
					</u-button>
				</u-form-item> -->

				<u-form-item prop="password" label="❤️ 密码" label-width="120">
					<u-input v-model="form.password" placeholder="请输入密码" type="password" password-icon />
				</u-form-item>

				<u-button @click="handleRegister" shape="circle" :custom-style="registerBtnStyle">
					绑定爱情密码
				</u-button>
			</u-form>

			<!-- 导航链接 -->
			<view class="footer-links">
				<text @click="navTo('/pages/login/login')">已有账户？立即登录</text>
			</view>
		</view>

		<!-- 在template的form-box下方添加 -->
		<u-modal :show="showCoupleModal" :show-cancel-button="true" :async-close="true" confirm-text="复制ID"
			cancel-text="去登录" title="💕 绑定成功！" @confirm="copyCoupleId" @cancel="confirmToLogin"
			:content-style="{ color: '#FF69B4', fontSize: '34rpx', textAlign: 'center' }">
			<view class="custom-modal-content">
				<text class="couple-id-text">{{ showCoupleId }}</text>
				<text class="tips">请妥善保存你们的情侣密钥✨</text>
			</view>
		</u-modal>

		<!-- 共享动画元素 -->
		<view class="floating-hearts">
			<!-- 同登录页爱心动画 -->
		</view>
	</view>
</template>

<script>
import { addUserData } from '@/api/users/users.js'
export default {
	data() {
		return {
			showCoupleModal: false,
			showCoupleId: '',
			form: {
				telephone: '',
				password: '',
				coupleId: ''
			},
			coupleInfo: '',
			codeCountdown: 0,
			particles: [],
			registerBtnStyle: {
				background: 'linear-gradient(135deg, #FF9AA2 0%, #FFB7B2 100%)',
				color: '#fff',
				height: '90rpx',
				marginTop: '40rpx'
			},
			rules: {
				telephone: [
					{ required: true, message: '请输入你们的专属号码', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入爱的密码', trigger: 'blur' },
					{ min: 6, message: '密码需要6位以上哦', trigger: 'blur' },
					{ pattern: /^(?=.*[A-Za-z])(?=.*\d).{6,}$/, message: '需包含字母和数字', trigger: 'blur' }
				]
			},
			codeBtnStyle: {
				width: '180rpx',
				background: 'rgba(255,245,230,0.9)',
				color: '#FF69B4'
			},
			isEditingCoupleId: false // 新增状态
		}
	},
	methods: {
		// 导航跳转
		navTo(path) {
			console.log("meizou zheli", path);
			uni.navigateTo({ url: path })
		},
		confirmCoupleId() {
			if (this.form.coupleId) {
				this.coupleInfo = `已绑定：甜蜜的另一半 🎉`;
				this.isEditingCoupleId = false; // 切换回显示模式
			} else {
				uni.showToast({ title: '请输入情侣ID', icon: 'none' });
			}
		},
		// 生成验证码
		// async getSMSCode() {
		// 	if (!/^1[3-9]\d{9}$/.test(this.form.telephone)) {
		// 		return uni.showToast({ title: '请输入正确手机号', icon: 'none' })
		// 	}
		// 	this.codeCountdown = 60
		// 	const timer = setInterval(() => {
		// 		if (this.codeCountdown <= 0) {
		// 			clearInterval(timer)
		// 			return
		// 		}
		// 		this.codeCountdown--
		// 	}, 1000)
		// 	// 实际应调用API
		// 	uni.showToast({ title: '验证码已发送' })
		// },

		// 扫描情侣码
		scanCoupleCode() {
			this.isEditingCoupleId = true; // 切换到编辑模式
		},

		// 提交注册
		handleRegister() {
			this.$refs.uForm.validate().then(async (valid) => {
				if (valid) {
					uni.showLoading({ title: '正在创建爱情账户...' })
					const res = await addUserData(this.form)
					if (res.code == '200') {
						// 新增逻辑
						this.showCoupleId = res.data[0].coupleId
						this.showCoupleModal = true
						uni.hideLoading()
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				}
			})
		},
		// 复制
		copyCoupleId() {
			uni.setClipboardData({
				data: this.showCoupleId,
				success: () => {
					uni.showToast({ title: '已复制到剪贴板💌', icon: 'none' })
				},
				fail:(err)=>{
					console.log(err);
				},
				complete: () => {
					this.showCoupleModal = false
				}
			})
		},
		confirmToLogin() {
			uni.redirectTo({ url: '/pages/login/login' })
		}
	}
}
</script>

<style lang="scss" scoped>
/* 删除错误嵌套，重写为独立样式 */
.auth-container {
	@extend %base-auth-layout; // 继承基础布局

	.couple-card {
		background: rgba(255, 255, 255, 0.9);
		padding: 30rpx;
		border-radius: 24rpx;
		margin: 30rpx 0;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 105, 180, 0.1);

		.couple-badge {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.tip-text {
			color: #FF69B4;
			font-size: 28rpx;
		}
	}

	/* 表单项目调整 */
	.u-form-item {
		&__body {
			background: rgba(255, 250, 240, 0.8) !important;
		}
	}
}

/* 在全局或公共样式中定义 */
%base-auth-layout {
	height: 100vh;
	background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
	position: relative;
	overflow: hidden !important;

	.particle-bg {
		position: absolute;
		width: 100%;
		height: 100%;

		.particle {
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			animation: float 8s infinite linear;
			opacity: 0.6;
		}
	}

	.header-illustration {
		padding: 60rpx 0 4vh;
		text-align: center;

		image {
			width: 500rpx;
			height: 30vh;
			max-height: 300rpx;
			filter: drop-shadow(0 10rpx 20rpx rgba(255, 105, 180, 0.2));
		}
	}

	.form-box {
		background: rgba(255, 255, 255, 0.95);
		margin: 0 40rpx 4vh;
		padding: 50rpx 40rpx;
		border-radius: 48rpx;
		backdrop-filter: blur(20rpx);
		box-shadow: 0 16rpx 48rpx rgba(255, 105, 180, 0.1);

		.form-title {
			text-align: center;
			font-size: 40rpx;
			color: #FF69B4;
			margin-bottom: 60rpx;
			font-weight: 500;
		}
	}

	.footer-links {
		margin-top: 40rpx;
		text-align: center;

		text {
			color: #FF7F7F;
			font-size: 26rpx;
			border-bottom: 2rpx solid transparent;
			transition: all 0.3s;

			&:active {
				opacity: 0.6;
			}
		}
	}
}

/* 动画需全局定义或单独引入 */
@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-200rpx);
	}

	100% {
		transform: translateY(-400rpx);
	}
}

// 自定义模态框样式
/deep/ .u-modal {
	z-index: 10002 !important; // 确保高于粒子背景（通常粒子背景z-index在10000左右）
	.u-modal__content {
		padding: 40rpx 0;

		.custom-modal-content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.couple-id-text {
				font-size: 48rpx;
				color: #FF69B4;
				font-weight: bold;
				margin: 20rpx 0;
				background: linear-gradient(135deg, #FF9AA2, #FF1493);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.tips {
				font-size: 28rpx;
				color: #FF7F7F;
				margin-top: 20rpx;
			}
		}
	}

	// 按钮样式覆盖
	.u-modal__button-group--confirm {
		background: linear-gradient(135deg, #FF9AA2 0%, #FFB7B2 100%) !important;
		border-radius: 60rpx !important;
	}

	.u-modal__button-group--cancel {
		background: rgba(255, 245, 230, 0.9) !important;
		border: 2rpx solid #FFB7B2 !important;
		color: #FF69B4 !important;
		border-radius: 60rpx !important;
	}

	// 标题样式
	.u-modal__title {
		color: #FF69B4 !important;
		font-size: 40rpx !important;
	}
}
</style>